<nz-layout class="layout">
  <nz-header>
    <div class="logo">
      <a href="/" style="color: #ffffff">My-App</a>
    </div>
    <ul nz-menu [nzTheme]="'dark'" [nzMode]="'horizontal'" style="line-height: 64px;">
      <li nz-menu-item>nav 1</li>
      <li nz-menu-item>nav 2</li>
      <li nz-menu-item>nav 3</li>
      <li nz-menu-item routerLink="/login" style="float:right;background: none">安全退出</li>
    </ul>
  </nz-header>
  <nz-layout>
    <nz-sider [nzWidth]="200" style="background:#fff">
      <ul nz-menu [nzMode]="'inline'" style="height:100%">
        <li nz-submenu>
          <span title><i class="anticon anticon-user"></i>subnav 1</span>
          <ul>
            <li nz-menu-item>option1</li>
            <li nz-menu-item>option2</li>
            <li nz-menu-item>option3</li>
            <li nz-menu-item>option4</li>
          </ul>
        </li>
        <li nz-submenu>
          <span title><i class="anticon anticon-laptop"></i>subnav 2</span>
          <ul>
            <li nz-menu-item>option5</li>
            <li nz-menu-item>option6</li>
            <li nz-menu-item>option7</li>
            <li nz-menu-item>option8</li>
          </ul>
        </li>
        <li nz-submenu>
          <span title><i class="anticon anticon-notification"></i>subnav 3</span>
          <ul>
            <li nz-menu-item>option9</li>
            <li nz-menu-item>option10</li>
            <li nz-menu-item>option11</li>
            <li nz-menu-item>option12</li>
          </ul>
        </li>
      </ul>
    </nz-sider>
    <nz-layout style="padding:0 24px 24px">
      <nz-breadcrumb style="margin:12px 0;">
        <nz-breadcrumb-item>Home</nz-breadcrumb-item>
        <nz-breadcrumb-item>List</nz-breadcrumb-item>
        <nz-breadcrumb-item>App</nz-breadcrumb-item>
      </nz-breadcrumb>
      <nz-content style="background:#fff; padding: 24px; min-height: 280px;">
        <div nz-row style="margin-bottom: 20px">
          <div nz-col [nzSpan]="2" style="text-align: right">
            <span class="publish-font">新闻标题:</span>
          </div>
          <div nz-col [nzSpan]="10">
            <nz-input [(ngModel)]="xinXi.xinWenBiaoTi" [nzPlaceHolder]="'请输入新闻标题'"></nz-input>
          </div>
        </div>
        <div nz-row style="margin-bottom: 20px">
          <div nz-col [nzSpan]="2" style="text-align: right">
            <span class="publish-font">作者:</span>
          </div>
          <div nz-col [nzSpan]="10">
            <nz-input [(ngModel)]="xinXi.zuoZhe" [nzPlaceHolder]="'请输入作者'"></nz-input>
          </div>
        </div>
        <div nz-row style="margin-bottom: 20px;text-align: right">
          <div nz-col [nzSpan]="2">
            <span class="publish-font">发布内容 :</span>
          </div>
          <div nz-col [nzSpan]="18">
            富文本编辑框
            <ckeditor [(ngModel)]="xinXi.neiRong" debounce="500"  [config]="nfig">
            </ckeditor>
          </div>
        </div>
        <div nz-row>
          <div nz-col [nzSpan]="2" style="margin-top: 30px;text-align: right">
            <span class="publish-font">上传图片:</span>
          </div>
          <div nz-col [nzSpan]="10">
            <!--图片上传-->
            <div class="clearfix">
              <nz-upload
                nzAction="https://jsonplaceholder.typicode.com/posts/"
                nzListType="picture-card"
                [(nzFileList)]="fileList"
                [nzShowButton]="fileList.length < 3"
                [nzPreview]="handlePreview">
                <i class="anticon anticon-plus"></i>
                <div class="ant-upload-text">Upload</div>
              </nz-upload>
              <nz-modal [nzVisible]="previewVisible" [nzContent]="modalContent" [nzFooter]="null" (nzOnCancel)="previewVisible=false">
                <ng-template #modalContent>
                  <img [src]="previewImage" [ngStyle]="{ 'width': '100%' }" />
                </ng-template>
              </nz-modal>
            </div>
          </div>
        </div>

        <div nz-row style="margin-bottom: 20px">
          <div nz-col [nzSpan]="2" style="text-align: right">
            <span class="publish-font">发布时间:</span>
          </div>
          <div nz-col [nzSpan]="10" >
            <nz-datepicker [(ngModel)]="xinXi.faBuShiJian" [nzShowTime]="true" [nzFormat]="'YYYY-MM-DD HH:mm:ss'" [nzPlaceHolder]="'当前时间'"  style="width:145px;"></nz-datepicker>
          </div>
        </div>
        <div nz-row style="margin-bottom: 20px">
          <div nz-col [nzSpan]="2" style="text-align: right">
            <span class="publish-font">新闻来源:</span>
          </div>
          <div nz-col [nzSpan]="10" >
            <nz-input [(ngModel)]="xinXi.xinWenLaiYuan" [nzPlaceHolder]="'请输入新闻来源'"></nz-input>
          </div>
        </div>
        <button nz-button [nzType]="'primary'" (click)="loadTwo($event)" [nzLoading]="isLoading" style="float: right;margin-top: 10px">
          <span>上传</span>
        </button>
        <!--输入的内容：<br> {{ ckeditorContent }}-->
      </nz-content>
    </nz-layout>
  </nz-layout>
</nz-layout>
